<template>
  <n-layout-sider
    bordered
    collapse-mode="width"
    :collapsed-width="110"
    :width="270"
    :collapsed="collapsed"
    show-trigger
    @collapse="collapsed = true"
    @expand="collapsed = false"
    content-style="padding: 24px;">
      <n-menu
      :inverted="true"
      :value="value"
      :collapsed="collapsed"
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :on-update:value="handleMenu"
      :default-expanded-keys="defaultExpandedKeys"
      :options="menuOptions" />
  </n-layout-sider>
</template>

<script setup lang='ts'>
import { h, Component, ref, onMounted } from 'vue'
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import {
  BookOutline  as BookIcon,
  PersonOutline as PersonIcon,
} from '@vicons/ionicons5'
import { RouterLink,useRoute } from 'vue-router'

var value = ref()
const collapsed = ref(false)
const defaultExpandedKeys = ["漫画管理"]
const route = useRoute()

onMounted(() => {
  value.value = route.name
})

function renderIcon (icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 菜单值
const menuOptions: MenuOption[] = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'user',
          }
        },
        { default: () => '用户管理' }
      ),
    key: 'user',
    icon: renderIcon(PersonIcon)
  },
  {
    label: "漫画管理",
    key: '漫画管理',
    icon: renderIcon(BookIcon),
    children: [
    {
        label: () =>
          h(
            RouterLink,
            {
              to: {
                name: 'allCartoon',
              }
            },
            { default: () => '全部漫画' }
          ),
        key: 'allCartoon',
        icon: renderIcon(BookIcon)
      },
      {
        label: () =>
          h(
            RouterLink,
            {
              to: {
                name: 'swiperManage',
              }
            },
            { default: () => '轮播漫画' }
          ),
        key: 'swiperManage',
        icon: renderIcon(BookIcon)
      },
      {
        label: () =>
          h(
            RouterLink,
            {
              to: {
                name: 'todayRecommend',
              }
            },
            { default: () => '今日推荐' }
          ),
        key: 'todayRecommend',
        icon: renderIcon(BookIcon)
      },
      {
        label: () =>
          h(
            RouterLink,
            {
              to: {
                name: 'weekRecommend',
              }
            },
            { default: () => '本周热推' }
          ),
        key: 'weekRecommend',
        icon: renderIcon(BookIcon)
      },
      {
        label: () =>
          h(
            RouterLink,
            {
              to: {
                name: 'newGrounding',
              }
            },
            { default: () => '最新上架' }
          ),
        key: 'newGrounding',
        icon: renderIcon(BookIcon)
      },
    ]
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'essay',
          }
        },
        { default: () => '文章管理' }
      ),
    key: route.name as string,
    icon: renderIcon(BookIcon)
  },
]

const handleMenu = (key:string) => {
  value.value = key
}
  
</script>

<style lang="scss" scoped>

</style>